<%-- Universidad del Valle de Guatemala --%>
<%-- @autor Evelyn Lissete Paiz, 11365 --%>
<%-- @autor Hsing Li Chang, 11087 --%>
<%-- @autor Jorge Lainfiesta, 11142 --%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%-- P�gina encargada de permitir el login de los usuarios, si estos no pertenecen 
	 al dominio de accai, entonces no se les permitira el acceso. Ser� permitido
	 crear cuentas solamente a los directores, por lo que esta p�gina permitir� 
	 esta opci�n al igual. --%> 
	 
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
		<link type="text/css" rel="stylesheet" href="/stylesheets/jquery.css" />
		<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
		<title>ACAAI</title>	
	</head>
	
	<%-- Script para la validaci�n del Sign Up. Este permite que en el cuadro que se muestra 
	     para el ingreso de la informaci�n, se ingrese solamente la informaci�n que se puede. --%>
	<script>
		$(document).ready(function(){
			 $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 400,
            width: 500,
            modal: true,
            buttons: {
                "Create an account": function() {
                    var bValid = true;
                    allFields.removeClass( "ui-state-error" );
 
                    bValid = bValid && checkLength( name, "username", 3, 16 );
                    bValid = bValid && checkLength( email, "email", 6, 80 );
                    bValid = bValid && checkLength( password, "password", 5, 16 );
 
                    bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
                    // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                    bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
                    bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
 
                    if ( bValid ) {
                        $( this ).dialog( "close" );
                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });
		$( "#createuser" )
           // .button()
            .click(function() {
                $( "#dialog-form" ).dialog( "open" );
            });
		});
	</script>
	
	<body>
		<%-- Se muestra el logo de ACAAI --%> 
		<div align="center" class="header">
			<img src = "/imagenes/accai2.png" />
		</div>
		
		<%-- Se muestra la informaci�n de la misi�n de ACAAI --%>
		<div class="left home">
			<img src = "/imagenes/mision2.png" / align="center">
		</div>
		
		<%-- Muestra las dos opciones que posee el usuario para crear el manejo de 
			 las cuentas. --%>
		<div class="right login">
			<h4>Iniciar Sesion</h4>
			<p>Bienvenido a Accai, seleccione la opcion que desea realizar.</p>
			<%-- Encargado del inicio de sesi�n. --%>
			<div class="right option">
				<form action="/login" method="get">
					<input type="submit" value="Sign In!" />
				</form>
			</div>
			<div class="left option">
				<input type="submit"  id="createuser" value="Sign Up!" />	
			</div>
		</div>
		
		<%-- Di�logo para ingresar la informaci�n para crear una nueva cuenta. --%>
		<div id="dialog-form" title="Formulario para la creaci�n de una nueva cueta.">
			<p class="validateTips">Porfavor llene todos los campos que se muestran.</p>
			<form>
			<fieldset>
				<div for="name"><div class="lblSignIn"> Nombre:</div>
				<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
				 </div>
				<div  for="email"><div class="lblSignIn"> Correo:</div>
				<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
				</div>
				<div  for="password"><div class="lblSignIn"> Contrase�a:</div>
				<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
				</div>
			</fieldset>
			</form>
		</div>
    </body>
</html>

